<template>
    <div class="order">
        <header>订单管理</header>
        <div class="contents">
            <div class="conditions">
                <div class="condition_1">
                    <div class="order_number">
                        <span style="width:80px;">订单号：</span>
                        <el-input v-model.trim="input1" placeholder="请输入订单号" style="width:300px;"></el-input>
                    </div>
                    <div class="market_type">
                        <span>咖啡店：</span>
                        <el-select :disabled="disA" clearable v-model="value1" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options1" :key="item.COMP_ID" :label="item.SHOP_NAME" :value="item.COMP_ID"> </el-option>
                        </el-select>
                    </div>
                    <div class="status">
                        <span>支付方式：</span>
                        <el-select clearable v-model="value2" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options2" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="condition_2">
                    <div class="keywords">
                        <span>手机号：</span>
                        <el-input v-model.trim="input2" placeholder="请输入手机号" style="width:300px;"></el-input>
                    </div>
                    <div class="order_status">
                        <span>订单状态：</span>
                        <el-select clearable v-model="value3" placeholder="请选择" style="width:300px;">
                            <el-option v-for="item in options3" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                        </el-select>
                    </div>
                    <div class="sel_date">
                        <span>选择日期：</span>
                        <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions1" range-separator="~" start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
                    </div>
                </div>
                <div class="add_market">
                    <div class="btn_left">
                        <el-button type="danger" style="background:#e7251a;" @click.native="querys">查询</el-button>
                        <el-button @click.native="resets">重置</el-button>
                    </div>
                </div>
                <el-button type="danger" style="background:#e7251a;margin:25px 0 10px 0;" @click.native="exports">批量导出</el-button>
                <div class="selected" v-if="selectArr.length>0">
                    <p>
                        <img src="../../assets/images/market/select2.png" alt="" />
                        <span>已选择&nbsp;
                            <label>{{selectArr.length}}</label>&nbsp;项</span>
                    </p>
                </div>
                <div class="tables">
                    <el-table v-loading="loading" :data="listData" style="width: 100%" @selection-change="handleSelectionChange">
                        <el-table-column type="selection" width="50"> </el-table-column>
                        <el-table-column prop="PHONE" label="手机号" width="140"> </el-table-column>
                        <el-table-column prop="ORDER_NO" label="订单号" width="220"> </el-table-column>
                        <el-table-column prop="SHOP_NAME" label="门店名称" width="250"> </el-table-column>
                        <el-table-column prop="ORDER_TIME" label="订单日期" width="150">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ORDER_TIME">{{ scope.row.ORDER_TIME | filterTimes }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ORDER_STATUS" label="状态" width="120">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ORDER_STATUS==2&&scope.row.PAY_STATUS==1">待服务</span>
                                <span v-if="scope.row.ORDER_STATUS==3">待评价</span>
                                <span v-if="scope.row.ORDER_STATUS==4">已完成</span>
                                <span v-if="scope.row.ORDER_STATUS==5">已取消</span>
                                <span v-if="scope.row.ORDER_STATUS==7">退款中</span>
                                <span v-if="scope.row.ORDER_STATUS==8">已退款</span>
                                <span v-if="scope.row.ORDER_STATUS==2&&scope.row.PAY_STATUS==0">待付款</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="PAY_WAY" label="支付方式" width="150">
                            <template slot-scope="scope">
                                <span v-if="scope.row.PAY_WAY==1">微信支付</span>
                                <span v-else-if="scope.row.PAY_WAY==2">支付宝支付</span>
                                <span v-else-if="scope.row.PAY_WAY==4">线下支付</span>
                                <span v-else-if="scope.row.PAY_WAY==9">银豹支付</span>
                                <span v-else>其它支付方式</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ORDER_TOTAL" label="订单金额" width="120">
                            <template slot-scope="scope">￥{{scope.row.ORDER_TOTAL}}</template>
                        </el-table-column>
                        <el-table-column prop="REAL_PAY_TOTAL" label="实付金额" width="120">
                            <template slot-scope="scope">￥{{scope.row.REAL_PAY_TOTAL}}</template>
                        </el-table-column>
                        <el-table-column prop="options" label="操作" width="100">
                            <template slot-scope="scope">
                                <span class="details" @click="goDetail(scope.row.ORDER_ID)">详情</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="tableDatas.COUNT"> </el-pagination>
                </div>
            </div>
        </div>
        <!-- 批量导出 要用表单 -->
        <footer>
        	<form method="post" name="forms" style="opacity:0;">
        		<input type="text" name="jsonParams" id="jsons" value=""/>
        		<input type="submit" value="提交"/>
        	</form>
        </footer>
    </div>
</template>
<script>    
    import dateSelect from '@/assets/js/date_time_picker.js' //日期选择器数据封装
    import { asyncRouterMap } from '@/router/index'
    import { setCookie, getCookie } from '@/assets/js/cookie'
    import $ from 'jquery'
    export default {
        name: 'order',
        data() {
            return {
                value1: '', //咖啡店
                value2: '', //支付方式
                value3: '', //订单状态
                input1: '', //订单号
                input2: '', //手机号
                options1: [],
                options2: [{
                    value: 1,
                    label: '微信支付'
                }, {
                    value: 2,
                    label: '支付宝支付'
                }, {
                    value: 4,
                    label: '线下支付'
                }, {
                    value: 9,
                    label: '银豹支付'
                }],
                options3: [{
                    value: 2,
                    label: '待服务'
                }, {
                    value: 3,
                    label: '待评价'
                }, {
                    value: 4,
                    label: '已完成'
                }, {
                    value: 5,
                    label: '已取消'
                }, {
                    value: 7,
                    label: '退款中'
                }, {
                    value: 8,
                    label: '已退款'
                },
                {
                    value: 10,
                    label: '待付款'
                }],
                value4: '', //选择日期
                pickerOptions1: dateSelect,
                tableDatas: [],
                selectArr: [], //已选择的数组集合
                loading: true,
                page1: 1, //当前页数
                pageSize1: 6, //每页多少条
                arr_one: [],
                arr_two: [],
                str_one: '', //一级菜单字符串
                str_two: '', //二级菜单字符串
                disA: false, //下拉框是否禁用
            }
        },
        computed: {
            //请求参数
            objs() {
                let obj = {};
                obj.PAGE_NO = this.page1;
                obj.PAGE_SIZE = this.pageSize1;
                this.input1 ? obj.ORDER_NO = this.input1 : null;
                if(this.value1 && this.value1 !== 'QB'){
                	obj.COMP_ID = this.value1;
                }                
                this.value2 ? obj.PAY_WAY = this.value2 : null;
                this.input2 ? obj.PHONE = this.input2 : null;
                if(this.value3 === 0) {
                    obj.PAY_STATUS = 0; //待付款 有点特殊
                } else if(this.value3) {
                    obj.ORDER_STATUS = this.value3;
                }
                if(this.value4 === null){
                	this.value4 = '';
                }
                if(this.value4.length > 0) {
                    obj.STATR_TIME = this.value4[0].getTime();
                    obj.END_TIME = this.value4[1].getTime();
                }                    
                return obj;
            },            
            //分页数据
            listData() {                
                if(this.tableDatas.ORDER_LIST) {
                    return this.tableDatas.ORDER_LIST;
                }
            },
        },
        created() {     
        	/* ----------权限管理---------- */
            if(getCookie('compId') !== 0) {
            	this.disA = true;
                let self = this;
                //console.log(asyncRouterMap);
                this.$axiosPost('/4SCAFE/cafeUser/getMenuListByUserId.action', {
                    CAFEUSER_ID: getCookie('userId')
                }).then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        //动态加载路由
                        res.MENU_DATA.forEach((v) => {
                            //一级菜单
                            self.arr_one.push(v.MENUID);
                            //二级菜单
                            v.MENUS.forEach((n) => {
                                self.arr_two.push(n.SECMENUNAME);
                            })
                        })
                    }
                    self.str_one = self.arr_one.join(',');
                    self.str_two = self.arr_two.join(',');
                    //0-功能  11-管理  19-统计  20-设置  
                    //asyncRouterMap[0].hidden = true;  
                    //asyncRouterMap[0].children[0].hidden = true;
                    //--------------------------功能----------------------------
                    if(self.str_one.indexOf(2) === -1) {
                        this.$set(asyncRouterMap[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('营销管理') === -1) {
                        this.$set(asyncRouterMap[0].children[0], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('优惠券管理') !== -1) {                    	
                        this.$set(asyncRouterMap[0].children[1], 'hidden', false);
                    }
                    if(self.arr_two.indexOf('广告位管理') === -1) {
                        this.$set(asyncRouterMap[0].children[2], 'hidden', true);
                    }
                    if(self.arr_two.indexOf('积分商城管理') === -1) {
                        this.$set(asyncRouterMap[0].children[3], 'hidden', true);
                    }
                    //--------------------------功能----------------------------
                    //--------------------------管理----------------------------
                    if(self.str_one.indexOf(3) === -1) {
                        this.$set(asyncRouterMap[11], 'hidden', true);
                    }
                    if(self.str_two.indexOf('门店管理') === -1) {
                        this.$set(asyncRouterMap[11].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('商品管理') === -1) {
                        this.$set(asyncRouterMap[11].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('会员管理') === -1) {
                        this.$set(asyncRouterMap[11].children[2], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单管理') === -1) {
                        this.$set(asyncRouterMap[11].children[3], 'hidden', true);
                    }
                    if(self.str_two.indexOf('退款管理') === -1) {
                        this.$set(asyncRouterMap[11].children[4], 'hidden', true);
                    }
                    //--------------------------管理----------------------------
                    //--------------------------统计----------------------------
                    if(self.str_one.indexOf(4) === -1) {
                        this.$set(asyncRouterMap[19], 'hidden', true);
                    }
                    if(self.str_two.indexOf('用户分析') === -1) {
                        this.$set(asyncRouterMap[19].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('订单分析') === -1) {
                        this.$set(asyncRouterMap[19].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('储存卡分析') === -1) {
                        this.$set(asyncRouterMap[19].children[2], 'hidden', true);
                    }
                    //--------------------------统计----------------------------
                    //--------------------------设置----------------------------
                    if(self.str_one.indexOf(5) === -1) {
                        this.$set(asyncRouterMap[20], 'hidden', true);
                    }
                    if(self.str_two.indexOf('积分设置') === -1) {
                        this.$set(asyncRouterMap[20].children[0], 'hidden', true);
                    }
                    if(self.str_two.indexOf('账号设置') === -1) {
                        this.$set(asyncRouterMap[20].children[1], 'hidden', true);
                    }
                    if(self.str_two.indexOf('系统设置') === -1) {
                        this.$set(asyncRouterMap[20].children[2], 'hidden', true);
                    }
                    //--------------------------设置----------------------------
                    console.log(self.str_one, self.str_two);
                })
            }
            /* ----------权限管理---------- */
            this.get4SCafeShopList();            
        },
        methods: {
        	//订单列表
        	getList(){        		
        		this.loading = true;
                this.$axiosPost('/4SCAFE/ServOrderSystem/getCafeOrder.action', this.objs).then(res => {
                    //console.log(res);
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.tableDatas = res;
                    }
                })
        	},
            //获取所有门店
            get4SCafeShopList() {
                this.$axiosPost('/4SCAFE/CafeActivitySystem/get4SCafeShopList.action').then(res => {
                    if(res.STATUS_CODE === 1) {
                        this.options1 = res.SHOP_LIST;
                        //门店列表增加 全部 二字
                        this.options1.unshift({
                        	COMP_ID:'QB',
                        	SHOP_NAME:'全部'
                        });
                        if(getCookie('compId')) {
                            this.value1 = getCookie('compId')
                        } else {
                            this.value1 = res.SHOP_LIST[0].COMP_ID;
                        }
                        this.getList();
                    }
                })
            },
            handleSelectionChange(val) {
                this.selectArr = val;
                //console.log(this.selectArr);
            },
            handleSizeChange(val) {
                this.loading = true;
                this.pageSize1 = val;
                this.getList();
            },
            handleCurrentChange(val) {
                this.loading = true;
                this.page1 = val;
                this.getList();
            },
            //订单详情
            goDetail(id) {
                this.$router.push({
                    path: '/manages/orderDetail/' + id
                });
            },
            //重置
            resets() {
                this.input1 = this.value1 = this.value2 = this.value3 = this.value4 = this.input1 = this.input2 = '';
            },
            //查询
            querys() {
                this.getList();
            },
            //批量导出
            exports() {
                if(this.selectArr.length === 0) {
                    this.$alert('请选择订单', '提示', {
                        confirmButtonText: '确定',
                    });
                    return;
                }
                this.loading = true;
                for(let i = 0; i < this.selectArr.length; i++) {
                    /* --------------时间处理start---------------- */
                    this.$set(this.selectArr[i], 'ORDER_TIME', this.formats(this.selectArr[i].ORDER_TIME));
                    /* --------------时间处理end------------------ */
                    /* --------------支付处理start---------------- */
                    if(this.selectArr[i].PAY_WAY == 1) {
                        this.$set(this.selectArr[i], 'PAY_WAY', '微信支付');
                    } else if(this.selectArr[i].PAY_WAY == 2) {
                        this.$set(this.selectArr[i], 'PAY_WAY', '支付宝支付');
                    } else if(this.selectArr[i].PAY_WAY == 4) {
                        this.$set(this.selectArr[i], 'PAY_WAY', '线下支付');
                    } else if(this.selectArr[i].PAY_WAY == 9) {
                        this.$set(this.selectArr[i], 'PAY_WAY', '银豹支付');
                    } else {
                        this.$set(this.selectArr[i], 'PAY_WAY', '其它支付');
                    }
                    /* --------------支付处理start----------------- */
                    /* --------------订单状态处理start------------- */
                    if(this.selectArr[i].ORDER_STATUS == 2 && this.selectArr[i].PAY_STATUS == 1) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '待服务');
                    } else if(this.selectArr[i].ORDER_STATUS == 3) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '待评价');
                    } else if(this.selectArr[i].ORDER_STATUS == 4) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '已完成');
                    } else if(this.selectArr[i].ORDER_STATUS == 5) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '已取消');
                    } else if(this.selectArr[i].ORDER_STATUS == 7) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '退款中');
                    } else if(this.selectArr[i].ORDER_STATUS == 8) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '已退款');
                    } else if(this.selectArr[i].ORDER_STATUS == 2 && this.selectArr[i].PAY_STATUS == 0) {
                        this.$set(this.selectArr[i], 'ORDER_STATUS', '待付款');
                    }
                    /* --------------订单状态处理end---------------- */
                    /* --------------订单金额start------------------ */
                    this.$set(this.selectArr[i], 'ORDER_TOTAL', '￥' + this.selectArr[i].ORDER_TOTAL);
                    /* --------------订单金额end-------------------- */
                    /* --------------实付金额start------------------ */
                    this.$set(this.selectArr[i], 'REAL_PAY_TOTAL', '￥' + this.selectArr[i].REAL_PAY_TOTAL);
                    /* --------------实付金额end-------------------- */
                }
                let objj = {
                    jsonParams: JSON.stringify(this.selectArr)
                };
                //表单处理
                document.forms.setAttribute('action',window.getIps+'/4SCAFE/ServOrderSystem/exportCafeOrder.action');
                document.getElementById('jsons').value = JSON.stringify(this.selectArr);
                setTimeout(()=>document.forms.submit(),0);
                setTimeout(()=>this.page1=this.page1+1,0);
                setTimeout(()=>this.page1=this.page1-1,1000);                
            },
            //时间格式化
            formats(val) {
                let y = new Date(val).getFullYear();
                let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
                let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
                let h = new Date(val).getHours() >= 10 ? new Date(val).getHours() : '0' + new Date(val).getHours();
                let ms = new Date(val).getMinutes() >= 10 ? new Date(val).getMinutes() : '0' + new Date(val).getMinutes();
                let s = new Date(val).getSeconds() >= 10 ? new Date(val).getSeconds() : '0' + new Date(val).getSeconds();
                return y + "-" + m + "-" + d + " " + h + ":" + ms + ":" + s;
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .order {
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            width: 97%;
            margin: 25px auto;
            padding: 25px;
            background: #fff;
            .conditions {
                span {
                    white-space: nowrap;
                }
                .condition_1 {
                    display: flex;
                    .order_number {
                        margin-right: 50px;
                    }
                    .status {
                        margin: 0 35px;
                    }
                }
                .condition_2 {
                    display: flex;
                    margin: 20px 0;
                    .order_status {
                        margin-left: 35px;
                    }
                    .sel_date {
                        margin-left: 35px;
                    }
                    .keywords {
                        display: flex;
                        align-items: center;
                        .el-input {
                            margin-left: 5px;
                        }
                    }
                }
                .add_market {
                    display: flex;
                    justify-content: space-between;
                    .btn_left {
                        display: flex;
                    }
                }
                .selected {
                    margin-top: 15px;
                    border: 1px solid #f0f0f0;
                    border-radius: 5px;
                    background: #fafafa;
                    p {
                        display: flex;
                        align-items: center;
                        img {
                            width: 20px;
                            height: 20px;
                            margin: 0 10px;
                        }
                        span {
                            font-size: 16px;
                            color: #717a7d;
                            label {
                                color: #e7251a;
                            }
                        }
                    }
                }
                .tables {
                    margin-top: 15px;
                    .el-pagination {
                        text-align: center;
                        margin-top: 30px;
                    }
                    .details {
                        color: #1d93ff;
                        cursor: pointer;
                        margin: 0 2px;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
            }
        }
    }
</style>